import { Component, ViewChild, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
import { VgMedia, BitrateOption } from 'videogular2/compiled/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {
  imgpath = 'http://img.tukexw.com/img/da536c365089833b.jpg';
  myAudio: any;
  myDiv: any;
  breeds: Array<any> = [];
  currentPageClass = this;
  @ViewChild('myMedia', { static: true }) myMedia: VgMedia;
  @ViewChild('main', { static: true }) content: IonContent;

  videoPath: string;
  videoQuality1: BitrateOption = {
    qualityIndex: 720,
    width: 500,
    height: 300,
    bitrate: 1,
    mediaType: "video/mp4",
    label: "高清",
  };
  videoQuality2: BitrateOption = {
    qualityIndex: 960,
    width: 500,
    height: 300,
    bitrate: 1,
    mediaType: "video/mp4",
    label: "超清",
  };
  dashBitrates: Array<BitrateOption> = [];


  playSwitch() {
    this.myAudio = document.getElementById('myaudio');
    // this.myDiv = document.getElementById('mydiv');
    if (this.myAudio.paused) {
      this.myAudio.play();
      this.myAudio.className = 'voicePlay';
      // this.myDiv.classList.add('bg', 'voicePlay');
    } else {
      this.myAudio.pause();
      // this.myDiv.classList.remove('bg', 'voicePlay');
      // this.myDiv.classList.add('bg', 'voicPause');
    }
  }
  constructor(public navCtrl: NavController,
    private photoViewer: PhotoViewer) {
    this.breeds = [{
      name: '测试',
      description: '测试'
    }, {
      name: '张三',
      description: '张三'
    }, {
      name: '李四',
      description: '李四'
    }, {
      name: '王五',
      description: '王五'
    }]
    let str: string = 'RHINSXYABCJLDEFGOQ';
    for (let i: number = 0; i < str.length; i++) {
      let nextChar: string = str.charAt(i);
      for (let j: number = 0; j < 3; j++) {
        let name: string = nextChar + 'name' + j;
        this.breeds.push({
          name: name,
          description: 'My name is ' + name
        });
      }
    }
  }
  ngOnInit(): void {
    this.videoPath = "assets/video.mp4";
    this.dashBitrates.push(this.videoQuality1, this.videoQuality2);
  }
  onClick(id) {
    // var  pos =   this.el.nativeElement.querySelector('#e10'); 
    const pos = document.getElementById(id);
    const lent = this.findPosition(pos);
    const posizition = lent.y - 70;
    this.content.scrollToPoint(0, posizition, 1000);
  }
  showimg1 = true;
  /**
   * 
   * @param e 
   */
  onSwipeDown(e) {

    if (e.deltaY > 100) {
      this.showimg1 = false;
    } else {
      this.showimg1 = true;
    }
  }
  /**
 * 
 * @param oElement 获取元素的左上角坐标 和宽高
 */
  findPosition(oElement) {
    let x2 = 0;
    let y2 = 0;
    let posX = 0;
    let posY = 0;
    const width = oElement.offsetWidth;
    const height = oElement.offsetHeight;
    if (typeof (oElement.offsetParent) !== 'undefined') {
      for (posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
        posX += oElement.offsetLeft;
        posY += oElement.offsetTop;
      }
      x2 = posX + width;
      y2 = posY + height;
      return { x: posX, y: posY, xx: x2, yy: y2 };
    } else {
      x2 = oElement.x + width;
      y2 = oElement.y + height;
      return { x: oElement.x, y: oElement.y, xx: x2, yy: y2 };
    }
  }
  changePrice(event) {
    debugger
    console.log(event.detail.value);
  }
  // showimg() {
  // this.photoViewer.show('https://mysecuresite.com/path/to/image.jpg', 'My image title', { share: false, headers: '{username:foo,password:bar}' });

  // }
}
